<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { defineProps, ref } from 'vue'

import HeaderNavTabarVue from '@/components/HeaderNavTabar/HeaderNavTabar.vue'
import timeSvg from '@/static/icon/auditSVG/timeAudit.svg'
import calendaSvg from '@/static/icon/auditSVG/calendaAudit.svg'
import computerSvg from '@/static/icon/auditSVG/computerAudit.svg'
import doorSvg from '@/static/icon/auditSVG/doorAudit.svg'
import suitcaseSvg from '@/static/icon/auditSVG/suitcaseAudit.svg'
import { getTitleBarHeight } from '@/utils/system.js'
import AuditCard from '@/components/audit/AuditCard.vue'
import jingyingSvg from '@/static/icon/auditSVG/jingyingSvg.svg'
import feijingyingSvg from '@/static/icon/auditSVG/feijingyingSvg.svg'
import beiyongjinSvg from '@/static/icon/auditSVG/beiyongjinSvg.svg'
import yewuzhaodaiSvg from '@/static/icon/auditSVG/yewuzhaodaiSvg.svg'
import caigoushenqingSvg from '@/static/icon/auditSVG/caigoushenqingSvg.svg'
import huopindizhangSvg from '@/static/icon/auditSVG/huopindizhangSvg.svg'
import xiangmuzijinSvg from '@/static/icon/auditSVG/xiangmuzijinSvg.svg'
import ruzhishenqingSvg from '@/static/icon/auditSVG/ruzhishenqingSvg.svg'
import zhuanzhengSvg from '@/static/icon/auditSVG/zhuanzhengSvg.svg'
import shigangSvg from '@/static/icon/auditSVG/shigangSvg.svg'
import lizhiSvg from '@/static/icon/auditSVG/lizhiSvg.svg'
import wupinSvg from '@/static/icon/auditSVG/wupinSvg.svg'
import yongzhangSvg from '@/static/icon/auditSVG/yongzhangSvg.svg'
import weixiuSvg from '@/static/icon/auditSVG/weixiuSvg.svg'
import yongcheSvg from '@/static/icon/auditSVG/yongcheSvg.svg'
import hetongSvg from '@/static/icon/auditSVG/hetongSvg.svg'
import gudingSvg from '@/static/icon/auditSVG/gudingSvg.svg'
import huiyishiSvg from '@/static/icon/auditSVG/huiyishiSvg.svg'
import linshigongSvg from '@/static/icon/auditSVG/linshigongSvg.svg'
import peixunhuiyiSvg from '@/static/icon/auditSVG/peixunhuiyiSvg.svg'
import gongwenSvg from '@/static/icon/auditSVG/gongwenSvg.svg'
import { getSelectApproveCount, getSelectApproveList } from '@/api/attendance'
import moren from '@/static/icon/tongxunlu/moren.png'
import approvalProcessState from '@/store/modules/approvalProcess'

const showBottonNaviBar = ref(true)
const removeBottomNaviBar = (val) => {
  showBottonNaviBar.value = val
}
const props = defineProps(['id'])
const tabbarData = ref([
  // 考勤
  [
    {
      typeList: '考勤',
      children: [
        {
          url: timeSvg,
          title: '补卡',
          txt: '发起补卡申请，每月 3 次',
        },
        {
          url: calendaSvg,
          title: '请假',
          txt: '发起各类请假、调休申请',
        },
        {
          url: computerSvg,
          title: '加班',
          txt: '发起加班申请',
        },
        {
          url: doorSvg,
          title: '外出',
          txt: '发起外出申请',
        },
        {
          url: suitcaseSvg,
          title: '出差',
          txt: '国内出差申请',
        },
      ],
    },
  ],
  // 财务
  [
    {
      typeList: '财务',
      children: [
        {
          url: jingyingSvg,
          title: '经营性付款申请',
          txt: '日常经营活动中，需要对外支付款项',
        },
        {
          url: feijingyingSvg,
          title: '非经营性付款申请',
          txt: '非日常经营活动中，需要对外支付款项',
        },
        {
          url: beiyongjinSvg,
          title: '备用金申请',
          txt: '根据实际需要发起备用金申请',
        },
        {
          url: yewuzhaodaiSvg,
          title: '业务招待报备申请',
          txt: '发起业务招待报备申请',
        },
        {
          url: caigoushenqingSvg,
          title: '采购申请',
          txt: '发起采购申请',
        },
        {
          url: huopindizhangSvg,
          title: '货品抵账申请',
          txt: '发起货品抵账申请',
        },
        {
          url: xiangmuzijinSvg,
          title: '项目资金众筹申请',
          txt: '发起项目资金众筹申请',
        },
      ],
    },
  ],
  // 人事
  [
    {
      typeList: '人事',
      children: [
        {
          url: ruzhishenqingSvg,
          title: '入职申请',
          txt: '发起入职申请',
        },
        {
          url: zhuanzhengSvg,
          title: '转正申请',
          txt: '发起转正申请',
        },
        {
          url: shigangSvg,
          title: '试岗报备',
          txt: '发起试岗报备',
        },
        {
          url: lizhiSvg,
          title: '离职',
          txt: '发起离职',
        },
      ],
    },
  ],
  // 行政
  [
    {
      typeList: '行政',
      children: [
        {
          url: wupinSvg,
          title: '物品领用申请',
          txt: '发起物品领用申请',
        },
        {
          url: yongzhangSvg,
          title: '用章用印申请',
          txt: '发起用章用印申请',
        },
        {
          url: weixiuSvg,
          title: '维修申请',
          txt: '发起维修申请',
        },
        {
          url: yongcheSvg,
          title: '用车申请',
          txt: '发起用车申请',
        },
        {
          url: hetongSvg,
          title: '合同流转',
          txt: '发起合同流转',
        },
        {
          url: gudingSvg,
          title: '固定资产报废申请',
          txt: '发起固定资产报废申请',
        },
        {
          url: huiyishiSvg,
          title: '会议室预订',
          txt: '发起会议室预订',
        },
        {
          url: gongwenSvg,
          title: '公文流转',
          txt: '发起公文流转',
        },
      ],
    },
  ],
  // 其他
  [
    {
      typeList: '其他',
      children: [
        {
          url: linshigongSvg,
          title: '临时工人申请',
          txt: '发起临时工人申请',
        },
        {
          url: peixunhuiyiSvg,
          title: '培训会议请假单',
          txt: '发起培训会议请假单',
        },
      ],
    },
  ],
])
const copyData = tabbarData.value
const searchValue = ref(null)
const index = ref(0)
const tabChange = (e) => {
  index.value = e
}

let value1 = ref('全部审批')
let value2 = ref('最新到达优先')
let option = ref([
  {
    text: '全部审批',
    value: '全部审批',
  },
])
let option2 = ref([
  {
    text: '最新到达优先',
    value: '最新到达优先',
  },
  {
    text: '最久等待优先',
    value: '最久等待优先',
  },
])

//顶部分段器
const items1 = ref(['考勤', '财务', '人事', '行政', '其他'])
const items2 = ref(['待办', '已办', '抄送我', '已发起'])
const current = ref(0)

const search = (v) => {
  if (v) {
    tabbarData.value[current.value][0].children = copyData[current.value][0].children.filter(
      (item) => {
        if (item.title.includes(v)) {
          return item
        }
      },
    )
  } else {
    tabbarData.value = JSON.parse(JSON.stringify(copyData))
  }
}

const rightIcon = () => {
  uni.switchTab({
    url: '/pages/work/index',
  })
  typeChange()
}
const leftParams = ref('全部审批')
const rightParams = ref('最新到达优先')
const typeShenPi = ref('待办')
// 全部书
const getSelectApproveCountFn = async () => {
  let params = {
    status: typeShenPi.value,
  }
    let { code, data } = await getSelectApproveCount(params)

  if (code === 200) {
    option.value = data.map((v) => {
      return {
        text: v.type,
        value: v.type,
        count: v.count,
      }
    })
    option.value.unshift({
      text: '全部审批',
      value: '全部审批',
      count: data.reduce((pre, cur) => {
        return Number(pre) + Number(cur.count)
      }, 0),
    })
  }
}
onLoad(() => {
  if (Number(props.id)) {
    index.value = Number(props.id)
  }
  typeChange()
  getSelectApproveCountFn()
})
const updatedCard = async () => {
  await typeChange()
}

const handleClick = (item) => {
  uni.navigateBack()
}

const onClickItem = (v) => {
  current.value = v.currentIndex
  if (index.value === 0) {
    search(searchValue.value)
  }
  if (index.value === 1) {
    switch (v.currentIndex) {
      case 0:
        value1.value = '全部审批'
        value2.value = '最新到达优先'
        option.value = [
          {
            text: '全部审批',
            value: '全部审批',
          },
          {
            text: '请假',
            value: '请假',
          },
          {
            text: '补卡',
            value: '补卡',
          },
          {
            text: '加班',
            value: '加班',
          },
          {
            text: '外出',
            value: '外出',
          },
          {
            text: '出差',
            value: '出差',
          },
        ]
        option2.value = [
          {
            text: '最新到达优先',
            value: '最新到达优先',
          },
          {
            text: '最久等待优先',
            value: '最久等待优先',
          },
        ]
        leftParams.value = '全部审批'
        rightParams.value = '最新到达优先'
        typeShenPi.value = '待办'
        typeChange()
        getSelectApproveCountFn()

        break
      case 1:
        value1.value = '全部审批'
        value2.value = '最新处理优先'
        option.value = [
          {
            text: '全部审批',
            value: '全部审批',
          },
        ]
        option2.value = [
          {
            text: '最新处理优先',
            value: '最新处理优先',
          },
          {
            text: '最早处理优先',
            value: '最早处理优先',
          },
        ]
        leftParams.value = '全部审批'
        rightParams.value = '最新处理优先'
        typeShenPi.value = '已办'
        typeChange()
        getSelectApproveCountFn()

        break
      case 2:
        value1.value = '全部审批'
        value2.value = '最新处理优先'
        option.value = [
          {
            text: '全部审批',
            value: '全部审批',
          },
          {
            text: '请假',
            value: '请假',
          },
          {
            text: '补卡',
            value: '补卡',
          },
          {
            text: '加班',
            value: '加班',
          },
          {
            text: '外出',
            value: '外出',
          },
          {
            text: '出差',
            value: '出差',
          },
        ]
        option2.value = [
          {
            text: '最新处理优先',
            value: '最新处理优先',
          },
          {
            text: '最早处理优先',
            value: '最早处理优先',
          },
        ]
        leftParams.value = '全部审批'
        rightParams.value = '最新处理优先'
        typeShenPi.value = '抄送我'
        typeChange()
        getSelectApproveCountFn()

        break
      case 3:
        value1.value = '全部审批'
        value2.value = '全部状态'
        option.value = [
          {
            text: '全部审批',
            value: '全部审批',
          },
        ]
        option2.value = [
          {
            text: '全部状态',
            value: '全部状态',
          },
          {
            text: '审批中',
            value: '审批中',
          },
          {
            text: '已通过',
            value: '已通过',
          },
          {
            text: '已拒绝',
            value: '已拒绝',
          },
          {
            text: '已撤回',
            value: '已撤回',
          },
        ]
        leftParams.value = '全部审批'
        rightParams.value = '全部状态'
        typeShenPi.value = '已发起'
        typeChange()
        getSelectApproveCountFn()
        break

      default:
        break
    }
  }
}
const cardDataList = ref(null)
const change1 = (v) => {
  leftParams.value = v.text
  typeChange()
}
const change2 = (v) => {
  rightParams.value = v.text
  typeChange()
}
const gotoDetailPage = (item) => {
  switch (item.appType) {
    case '考勤':
      uni.navigateTo({
        url: `/pages/audit/auditDetails?type=${item.appType}&id=${item.id}&shengpiFlag=${false}`,
      })
      break
    case '财务':
      uni.navigateTo({
        url: `/pages/audit/auditDetails?type=${item.appType}&id=${item.id}&shengpiFlag=${false}`,
      })
      break
    case '人事':
      uni.navigateTo({
        url: `/pages/audit/auditDetails?type=${item.appType}&id=${item.id}&shengpiFlag=${false}`,
      })
      break
    case '行政':
      uni.navigateTo({
        url: `/pages/audit/auditDetails?type=${item.appType}&id=${item.id}&shengpiFlag=${false}`,
      })
      break
    case '其他':
      break
  }
}
const typeChange = async () => {
  // 调取筛选
  let params = {
    type: leftParams.value === '全部审批' ? null : leftParams.value,
    status: typeShenPi.value,
  }
  let { data, code } = await getSelectApproveList(params)
  if (code === 200) {
    cardDataList.value = data
  }
}
const optionListData = ref([])
const checkboxChange = (e) => {
  approvalProcessState.mutations.setAssociateData(approvalProcessState.state,e.detail.value)
  optionListData.value = e.detail.value
}
const searchPersonData = ref(null)

function debounce(func, wait) {
  let timeout
  return function (...args) {
    const context = this
    clearTimeout(timeout)
    timeout = setTimeout(() => func.apply(context, args), wait)
  }
}

let debounceSearch = debounce(function () {
  console.log(searchPersonData.value)
  // let params = {
  //   pageNum:1,
  //   pageSize: 10000,
  //   nickName: searchData.value,
  // }
  // let {code,rows} = await getDeptTree(params)
  // if(code === 200) {
  //   searchPerson.value = rows
  // }
}, 500)
const searchPerson = (v) => {
  searchPersonData.value = v
  // 掉搜索接口
  debounceSearch()
}
</script>

<template>
  <view>
    <HeaderNavTabarVue
      :iconFont="'icon-cuowuguanbiquxiao'"
      title="审核中心"
      @rightIcon="rightIcon"
    />
    <view class="topClass">
      <uni-search-bar
        v-model="searchValue"
        cancelButton="none"
        class="searchBar"
        clearButton="auto"
        placeholder="请输入申请名称"
        radius="8rpx"
        @input="searchPerson"
      />
      <uni-segmented-control
        :current="current"
        :values="items2"
        active-color="#165DFF"
        class="segment"
        in-active-color="#4E5969"
        style-type="text"
        @clickItem="onClickItem"
      />
    </view>
    <view>
      <zb-dropdown-menu style="width: 100%; height: 92rpx">
        <zb-dropdown-item
          v-model="value1"
          :duihaoFlag="false"
          :options="option"
          name="first"
          @change="change1"
        ></zb-dropdown-item>
        <zb-dropdown-item
          v-model="value2"
          :options="option2"
          name="two"
          @change="change2"
        ></zb-dropdown-item>
      </zb-dropdown-menu>
    </view>
    <scroll-view
      :style="`height: calc(100vh - ${getTitleBarHeight() * 2}rpx - 56rpx - 92rpx - 96rpx  - 64rpx)`"
      class="scroll-Y"
      scroll-y="true"
    >
      <checkbox-group @change="checkboxChange">
        <label
          v-for="(item, index) in cardDataList"
          :key="index"
          class="uni-list-cell uni-list-cell-pd msg-list"
        >
          <view>
            <checkbox :checked="item.checked" :value="item" />
          </view>
          <AuditCard
            :itemProps="item"
            :show-tag="true"
            :typeShenPi="typeShenPi"
            @updatedCard="updatedCard"
          />
        </label>
      </checkbox-group>
      <view class="buttonContainer">
        <text>最多支持关联10个申请单</text>
        <p  class="buttonClass" @tap="handleClick">确定</p>
      </view>
    </scroll-view>
  </view>
</template>

<style scoped lang="scss">
@import '@/static/style/index.scss';
.topClass {
  background-color: #fff;
}
:deep(.uni-checkbox-input){
  border-radius: 50%;
}
.searchBar {
  height: 120rpx;
}
.buttonContainer {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 999;
  height: 130rpx;
  width: 100%;
  background-color: #f7f8fa;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;

  .buttonClass {
    text-align: center;
    color: #165dff;
    z-index: 999;
    font-size: 28rpx;
  }
}
.segment {
  height: 56rpx;
  padding-bottom: 12rpx;
}
.msg-list {
  @include flex($align: center);
  background-color: #fff;
  padding: 0 $spacing-row-base;

  &:active {
    background-color: #eff0f2;
  }

  .list-left {
    @include flex($align: center);
    margin-left: 20rpx;

    .imageWrapper {
      @include flex($align: center, $justify: space-between);
      background-color: #e8f3ff;
      padding: 10rpx;
      margin-right: 16rpx;
      border-radius: 32rpx;
    }

    image {
      width: 42rpx;
      height: 42rpx;
      border-radius: 50%;
    }

    .msg-type-author {
      @include flex($align: center);

      h4 {
        margin-right: 16rpx;
        color: #000000;
        font-family: 'PingFang SC';
        font-size: 32rpx;
        font-style: normal;
        font-weight: 400;
        line-height: 44.8rpx;
      }

      p {
        text-align: center;
        font-family: 'PingFang SC';
        font-size: 20rpx;
        font-style: normal;
        font-weight: 500;
        padding: 3rpx 8rpx;
        border-radius: 4rpx;
      }
    }

    text {
      align-self: stretch;
      color: #86909c;
      font-family: 'PingFang SC';
      font-size: 24rpx;
      font-style: normal;
      font-weight: 400;
      line-height: 33.6rpx;
      margin-top: 8rpx;
    }
  }

  .time-txt {
    color: #86909c;
    text-align: right;
    font-family: 'PingFang SC';
    font-size: 28rpx;
    font-style: normal;
    font-weight: 400;
    line-height: 39.2rpx;
  }
}
</style>
